let displayForm = {
  show: ($box, animation) => {
    $box.classList.remove("hide");
    $box.classList.add("show", animation);
  },
  hide: ($box, animation) => {
    $box.classList.remove("show", animation);
    $box.classList.add("hide");
  }
};

window.onload = event => {
  let $return = {
    user: e(".user-button"),
    menu: e(".return-menu"),
    show: e(".right-contain"),
    form: e(".form-area")
  };

  insertUser($return.user);

  $return.menu.addEventListener("click", event => {
    if (event.target.tagName === "LI") {
      let oldSelect = e(".select");
      if (typeof oldSelect !== "undefined")
        oldSelect.classList.remove("select");
      event.target.classList.add("select");
      for (let showBox of $return.show.children)
        if (
          showBox.querySelector(".title").innerText === event.target.innerText
        ) {
          showBox.classList.remove("hide");
          showBox.classList.add("show");
        } else {
          showBox.classList.remove("show");
          showBox.classList.add("hide");
        }
    }
  });

  $return.show.addEventListener("click", e => {
    if (e.target.tagName === "BUTTON") {
      let addPattern = /^add-/,
        updPattern = /^upd-/,
        btnClass = e.target.classList.item(0);

      if (addPattern.test(btnClass) || updPattern.test(btnClass)) {
        let page = btnClass.split("-")[1];
        displayForm.show(
          $return.form.querySelector("." + page),
          page + "-slide-down"
        );
      }
    }
  });

  $return.form.addEventListener("click", e => {
    if (e.target.tagName === "BUTTON") {
      let submitPattern = /-submit$/,
        btnClass = e.target.classList[0];

      if (submitPattern.test(btnClass)) {
        let page = btnClass.split("-")[0];
        displayForm.hide(
          $return.form.querySelector("." + page),
          page + "-slide-down"
        );
      }
    }
  });
};
